<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
    var eventoId = <c:out value="${eventoId}"/>

    $(document).ready(function(){
        $(".button").button();
        $("#registrar_pasajero").click(function(){
            window.location.href= '<c:url value="/app/page/evento/"/>' + eventoId + '/pasajero/alta';
        });
        jQuery.ajax({
            type : 'GET',
            url : '<c:url value="/app/registroPasajero/evento/id/"/>'+eventoId,
            contentType : 'application/json',
            dataType : 'json',
            success : servicioObtenerpasajerosSuccessCallBack,
            error : servicioObtenerpasajerosErrorCallBack

        });
        
        
        
        
    });
    
    function servicioObtenerpasajerosSuccessCallBack(data){
    	
    	var pasajeros = data.pasajeros;
    	for (var i=0; i < pasajeros.length; i++) {
    		pasajeros[i].evento = data.evento;
    	}
    	var cantidadpasajeros = pasajeros.length;
        $("#pasajero_row_tmpl").tmpl(pasajeros).appendTo("#listado");
        if (cantidadpasajeros > 0) {
            $("#listado_pasajero tfoot th span").text(cantidadpasajeros + " pasajeros");
        }
    }
    function servicioObtenerpasajerosErrorCallBack(data) {
        $("#listado").append(
                $("<tr/>").append( 
                    $("<td/>").attr("colspan","7").text("Error al obtener el listado de pasajeros")
                ) 
        );
    }            
</script>
<script id="pasajero_row_tmpl" type="text/x-jquery-tmpl">
    <tr>
        <td>\${persona.apellido}, \${persona.nombre}</td>
        <td>\${persona.tipoDoc}, \${persona.numeroDoc}</td>
        <td>\${persona.email}</td>
        <td>\${persona.telefono}</td>
        <td>\${persona.telefonoMovil}</td>
        {{if acompanianteDe != null}}
            <td>\${acompanianteDe.persona.apellido}, \${acompanianteDe.persona.nombre}</td>
        {{else}}
            <td>-----</td>
        {{/if}}
        <td>
            <a href='<c:url value="/app/page/evento/\${evento.id}/pasajero/edicion/id/"/>\${id}'>editar</a>
            <a href='<c:url value="/app/page/evento/\${evento.id}/pasajero/"/>\${id}/servicio '>servicio</a>
        </td>
    </tr>

</script>
<div class="content">
    <div class="row">
        <h2>pasajeros</h2>
        
    </div>
    <div class="row">
        <table class="listado">
                    <thead>
                        <tr>
                            <th>Apellido, Nombre</th>
                            <th>Documento</th>
                            <th>E-mail</th>
                            <th>Tel. Particular</th>
                            <th>Tel. M&oacute;vil</th>
                            <th>Acompa&ntilde;ante de</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="7">
                                <span>&nbsp;</span>
                            </th>
                        </tr>
                    <tfoot>    
                    <tbody id="listado">
                       
                    </tbody>
                </table>
        <button class="button" id="registrar_pasajero">Registrar pasajero</button>
    </div>        
